import {Component, OnDestroy, OnInit} from '@angular/core';

import {DatePipe} from '@angular/common';

import {OnvifWsService} from '../onvif-ws.service';

import Timer = NodeJS.Timer;

@Component({
  selector: 'app-video-control',
  templateUrl: './video-control.component.html',
  styleUrls: ['./video-control.component.css']
})
export class VideoControlComponent implements OnInit, OnDestroy {

  constructor(private ws: OnvifWsService) { }

  private datePipe = new DatePipe('en-US');

  interval: Timer;

  // 面板描述信息
  descr = {
    user: {
      avatar: 'assets/app/media/img//users/user1.jpg',
      name: '可乐丶君',
      department: '唐山新质点科技安防管理处'
    },
    text: 'Onvif RMTP Video 组件实现了对支持 Onvif RSTP 协议的支持，您可以连接任何支持该协议的网络摄像设备。' +
      '本组件主要分为三个子组件，右侧子组件主要做主组件概述信息展示，包括版本、GIT 仓库信息等；' +
      '右侧组件展板主要完成了对设备的基本信息、网络信息、支持的协议等信息展示；' +
      '中间组件为核心组件，完成了对实时视频流的监控预览，同时支持云台控制、镜头拉近、拉远、调焦距、视频窗口捕获等功能；' +
      '您可以将鼠标悬浮在组件下方按钮上了解按钮控制信息,或者使用快捷键进行操作.<br/><br/>' +
      '上： pageUp; 下：pageDown; 左： Home; 右：end; 拉近：Ctrl+`+`; 拉远: Ctrl+`-`',
    time: '00:00:00'
  }

  ngOnInit() {

    // 面板显示当前时间
    this.interval = setInterval(() => {
      this.descr.time = this.convertDate(new Date());
    }, 1000);

    const that = this;
    // 注册全局键盘事件
    $('body').bind('keydown', function(event) {

      if (event.keyCode === 38) {
        // 上
        that.ptzcmdSubmit(`MOVE_UP`);
      } else if (event.keyCode === 40) {
        // 下
        that.ptzcmdSubmit(`MOVE_DOWN`);
      } else if (event.keyCode === 37) {
        // 左
        that.ptzcmdSubmit(`MOVE_LEFT`);
      } else if (event.keyCode === 39) {
        // 右
        that.ptzcmdSubmit(`MOVE_RIGHT`);
      }
    });

    $('body').bind('keyup', function(event) {
      that.ptzcmdSubmit(`STOP`);
    });
  }

  ngOnDestroy() {

    // 页面销毁清楚定时器
    clearInterval(this.interval);
  }

  // 日期转换
  convertDate(date: Date) {
    return this.datePipe.transform(date, 'HH:mm:ss');
  }

  // 云台控制
  ptzcmdSubmit(cmd: string): void {
    console.log(cmd);
    this.ws.ptzControl(cmd);
  }

  // 捕获监控画面
  capture(): void {
    console.log(`capture`);
  }
}
